<template>
    <view class="e-countdown">
      <block v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '0'))">
        <view v-if="separator === 'colon' && type === 'square'" class="e-countdown-item" :style="[itemStyle]">
          <view class="e-countdown-time" :style="[letterStyle]">
            {{ d }}
          </view>
        </view>
        <text v-else class="e-countdown-default">{{ d }}</text>
      </block>
  
      <block v-if="showDays && (hideZeroDay || (!hideZeroDay && d != '0'))">
        <view v-if="type === 'square'" class="e-countdown-colon" :style="{ fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator === 'colon' ? !dayIsZh ? '4rpx' : 0 : 0,margin: dayIsZh ? '3rpx 4rpx 0 4rpx' : 0}">
          {{ separator === 'colon' ? !dayIsZh ? ':' : '天' : '天' }}
        </view>
        <text v-else class="e-countdown-default">:</text>
      </block>
  
      <block v-if="showHours">
        <view v-if="separator === 'colon' && type === 'square'" class="e-countdown-item" :style="[itemStyle]">
          <view class="e-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color }">
            {{ h }}
          </view>
        </view>
        <text v-else class="e-countdown-default">{{ h }}</text>
      </block>
  
      <block v-if="showHours">
        <view v-if="type === 'square'" class="e-countdown-colon" :style="{ fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator === 'colon' ? '4rpx' : 0 }">
          {{ separator === 'colon' ? ':' : '时' }}
        </view>
        <text v-else class="e-countdown-default">:</text>
      </block>
  
      <block v-if="showMinutes">
        <view v-if="separator === 'colon' && type === 'square'" class="e-countdown-item" :style="[itemStyle]">
          <view class="e-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color }">
            {{ i }}
          </view>
        </view>
        <text v-else class="e-countdown-default">{{ i }}</text>
      </block>
  
      <block v-if="showMinutes">
        <view v-if="type === 'square'" class="e-countdown-colon" :style="{ fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator === 'colon' ? '4rpx' : 0 }">
          {{ separator === 'colon' ? ':' : '分' }}
        </view>
        <text v-else class="e-countdown-default">:</text>
      </block>
  
      <block v-if="showSeconds">
        <view v-if="separator === 'colon' && type === 'square'" class="e-countdown-item" :style="[itemStyle]">
          <view class="e-countdown-time" :style="{ fontSize: fontSize + 'rpx', color: color }">
            {{ s }}
          </view>
        </view>
        <text v-else class="e-countdown-default">{{ s }}</text>
      </block>
  
      <view v-if="showSeconds && separator === 'zh'" class="e-countdown-colon" :style="{ fontSize: separatorSize + 'rpx', color: separatorColor, paddingBottom: separator === 'colon' ? '4rpx' : 0 }">
        秒
      </view>
    </view>
  </template>
  
  <script>
  export default {
    name: 'eCountDown',
    props: {
      // 倒计时的时间，秒为单位
      timestamp: {
        type: [Number, String],
        default: 0
      },
      // 是否自动开始倒计时
      autoplay: {
        type: Boolean,
        default: true
      },
      type: {
        type: String,
        default: 'square'
      },
      // 用英文冒号(colon)或者中文(zh)当做分隔符，false的时候为中文，如："11:22"或"11时22秒"
      separator: {
        type: String,
        default: 'colon'
      },
      // 分隔符的大小，单位rpx
      separatorSize: {
        type: [Number, String],
        default: 22
      },
      // 分隔符颜色
      separatorColor: {
        type: String,
        default: '#fff'
      },
      // 字体颜色
      color: {
        type: String,
        default: '#fff'
      },
      // 字体大小，单位rpx
      fontSize: {
        type: [Number, String],
        default: '14px'
      },
      // 背景颜色
      background: {
        type: String,
        default: '#000'
      },
      // 数字框高度，单位rpx
      height: {
        type: [Number, String],
        default: 48
      },
      // 是否显示数字框
      showBorder: {
        type: Boolean,
        default: false
      },
      // 边框颜色
      borderColor: {
        type: String,
        default: 'none'
      },
      // 是否显示秒
      showSeconds: {
        type: Boolean,
        default: true
      },
      // 是否显示分钟
      showMinutes: {
        type: Boolean,
        default: true
      },
      // 是否显示小时
      showHours: {
        type: Boolean,
        default: true
      },
      // 是否显示“天”
      showDays: {
        type: Boolean,
        default: false
      },
      // 当"天"的部分为0时，不显示
      hideZeroDay: {
        type: Boolean,
        default: false
      },
      dayIsZh: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      // 监听时间戳的变化
      timestamp(newVal, oldVal) {
        // 如果倒计时间发生变化，清除定时器，重新开始倒计时
        this.clearTimer()
        this.start()
      }
    },
    data() {
      return {
        d: '00', // 天的默认值
        h: '00', // 小时的默认值
        i: '00', // 分钟的默认值
        s: '00', // 秒的默认值
        timer: null, // 定时器
        seconds: 0 // 记录不停倒计过程中变化的秒数
      }
    },
    computed: {
      // 倒计时item的样式，item为分别的时分秒部分的数字
      itemStyle() {
        const style = {}
        if (this.height) {
          style.height = this.height + 'rpx'
          style.width = this.height + 'rpx'
        }
        if (this.showBorder) {
          style.borderStyle = 'solid'
          style.borderColor = this.borderColor
          style.borderWidth = '1px'
        }
        if (this.background) {
          style.backgroundColor = this.background
        }
        if (this.dayIsZh) {
          style.width = 'auto'
        }
        return style
      },
      // 倒计时数字的样式
      letterStyle() {
        const style = {}
        if (this.fontSize) style.fontSize = this.fontSize + 'rpx'
        if (this.color) style.color = this.color
        return style
      }
    },

    mounted() {
      // 如果自动倒计时
      this.autoplay && this.timestamp && this.start()
    },
    methods: {
      // 倒计时
      start() {
        // 避免可能出现的倒计时重叠情况
        this.clearTimer()
        if (this.timestamp <= 0) return
        this.seconds = Number(this.timestamp)
        this.formatTime(this.seconds)
        this.timer = setInterval(() => {
          this.seconds--
          // 发出change事件
          this.$emit('change', this.seconds)
          if (this.seconds < 0) {
            return this.end()
          }
          this.formatTime(this.seconds)
        }, 1000)
      },
      // 格式化时间
      formatTime(seconds) {
        // 小于等于0的话，结束倒计时
        seconds <= 0 && this.end()
        let [day, hour, minute, second] = [0, 0, 0, 0]
        day = Math.floor(seconds / (60 * 60 * 24))
        // 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
        // hour为给后面计算秒和分等用的(基于显示天的前提下计算)
        hour = Math.floor(seconds / (60 * 60)) - day * 24
        // showHour为需要显示的小时
        let showHour = null
        if (this.showDays) {
          showHour = hour
        } else {
          // 如果不显示天数，将“天”部分的时间折算到小时中去
          showHour = Math.floor(seconds / (60 * 60))
        }
        minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60
        second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60
        // 如果小于10，在前面补上一个"0"
        showHour = showHour < 10 ? '0' + showHour : showHour
        minute = minute < 10 ? '0' + minute : minute
        second = second < 10 ? '0' + second : second
        this.d = day
        this.h = showHour
        this.i = minute
        this.s = second
      },
      // 停止倒计时
      end() {
        this.clearTimer()
        this.$emit('end', {})
      },
      // 清除定时器
      clearTimer() {
        if (this.timer) {
          // 清除定时器
          clearInterval(this.timer)
          this.timer = null
        }
      }
    },
    beforeDestroy() {
      clearInterval(this.timer)
      this.timer = null
    }
  }
  </script>
  
  <style scoped lang="scss">
  .e-countdown {
    display: inline-flex;
    align-items: center;
    font-family: font-number;
  }
  
  .e-countdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rpx;
    white-space: nowrap;
    transform: translateZ(0);
  }
  
  .e-countdown-time {
    margin: 0;
    padding: 0;
    line-height: 1;
  }
  
  .e-countdown-colon {
    // min-width: 20rpx;
    display: flex;
    justify-content: center;
    line-height: 1;
    align-items: center;
    padding-bottom: 4rpx;
  }
  
  .e-countdown-scale {
    transform: scale(0.9);
    transform-origin: center center;
  }
  
  .e-countdown-default {
    font-weight: bold;
    font-size: 14px;
    color: #cb0000;
  }
  </style>
  